<template>
  <div class="search-panel">
    <van-search
      v-model="value"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const value = ref('')
  const emit = defineEmits(['cancel', 'search'])

  const onSearch = () => {
    emit('search')
  }
  const onCancel = () => {
    emit('cancel')
  }
</script>

<style lang="less" scoped>
  .search-panel {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding: 0px 20px;
    overflow-y: scroll;
  }
</style>
